<template>
  <div id="nav">
    <van-row type="flex" justify="space-around">
      <van-col span="3">
        <router-link to="/" tag="li" class="msg">
          <span class="iconfont">&#xe603;</span>
          键盘
        </router-link>
      </van-col>

      <van-col span="3">
        <router-link to="/" tag="li" class="msg">
          <span class="iconfont">&#xe618;</span>
          鼠标
        </router-link>
      </van-col>

      <van-col span="3">
        <router-link to="/" tag="li" class="msg">
          <span class="iconfont">&#xe64c;</span>
          耳机
        </router-link>
      </van-col>

      <van-col span="3">
        <router-link to="/" tag="li" class="msg">
          <span class="iconfont">&#xe8bb;</span>
          屏幕
        </router-link>
      </van-col>

      <van-col span="3">
        <router-link to="/"  tag="li" class="msg">
          <span class="iconfont">&#xe6c2;</span>
          音箱
        </router-link>
      </van-col>

    </van-row>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#nav{
  margin-bottom: 0.1rem;
}
.msg{
  display: flex; 
  flex-direction: column; 
  justify-content: space-evenly;
  align-items: center;
}
.iconfont{
    font-size: 0.4rem;
}
</style>